{% extends 'esign/base_login.html' %}
{% load static %}
{% block content %}
  {% if can_sign %}
  {% else %}
  <div class="card mb-3 p-3">
    <p class="text-danger fw-bold">
      You cannot sign yet. Please wait for previous users to sign first.
    </p>
    </div>
  {% endif %}

{% if can_sign %}

<div class="container-fluid">
  <div class="row">

    <!-- Left Sidebar -->
<!-- Left Sidebar -->
<div class="col-12 col-lg-3 mb-3">
  <div class="position-sticky" style="top:20px;"> <!-- fixed-left alternative -->

    <div class="card" hidden>
      <!-- Draw New Signature -->
      <div class="card-body ">
        <h5 class="fw-semibold mb-2">Draw New Signature</h5>
        <canvas id="draw-canvas" width="400" height="120" class="w-100 mb-2 bg-light border"></canvas>
        <button id="save-sig" class="btn btn-primary w-100">Save Drawn Signature</button>
      </div>
      <!-- / Draw New Signature -->

      <!-- Text Signature -->
      <div class="card-body">
        <h5 class="fw-semibold">Text Signature</h5>
        <input type="text" id="text-sign" class="form-control mb-2" placeholder="Type your signature">
        <div class="d-flex mb-2">
          <select id="font-select" class="form-select me-2">
            <option value="Arial">Arial</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Verdana">Verdana</option>
            <option value="Tahoma">Tahoma</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Impact">Impact</option>
            <option value="Lucida Console">Lucida Console</option>
            <option value="Palatino Linotype">Palatino Linotype</option>
          </select>
          <input type="color" id="text-color" class="form-control" value="#000000" style="height:37px">
        </div>
        <button id="save-text-sig" class="btn btn-primary w-100">Save Text Signature</button>
      </div>
      <!-- / Text Signature -->

      <!-- Upload Image Signature -->
      <!-- <div class="card-body">
        <h5 class="fw-semibold mb-2">Upload Image Signature</h5>
        <input type="file" id="image-sign" accept="image/*" class="form-control mb-2">
        <img id="preview-image-sign" src="" alt="Preview" class="w-100 mb-2 border p-1" style="display:none;">
        <button id="save-image-sig" class="btn btn-primary w-100">Save Image Signature</button>
      </div> -->
      <!-- / Upload Image Signature -->
       <div class="card-body">

     <div id="drop-area" 
     style="width:250px;height:120px;border:2px dashed #888;
            display:flex;flex-direction:column;align-items:center;
            justify-content:center;text-align:center;
            cursor:pointer;border-radius:6px;padding:10px;">
    
    <p style="margin:0;font-size:14px;color:#555;">
        <strong>Drag & Drop</strong> or<br>Click to Select Image
    </p>
</div>


    <input type="file" id="image-sign" class="d-none" accept="image/*">

    <img id="preview-img" src="" style="margin-top:10px;max-width:200px;display:none;">

    <button id="save-image-sig" class="btn btn-primary mt-2">Save Signature</button>

    </div>

    </div>
  </div>
</div>


    <!-- Right Column: PDF Preview -->
    <div class="col-12 col-lg-9">
  <div class="card d-flex flex-column my-3">
    
    <!-- Signatures Section (fixed at top of card) -->
    <div class="p-3 position-sticky top-0 p-3" style="flex: 0 0 auto; z-index: 2; background: #111;">
      <h5 class="fw-semibold mb-2">PDF Preview Pages you can sign: {{ allowed_pages_list|join:", " }}</h5>  
      <div id="sig-list" class="d-flex flex-row flex-nowrap overflow-auto">
       
<style>
  .sig-wrapper {
  position: relative;
  display: inline-block;
}

.sig-wrapper .delete-sig {
  position: absolute;
  top: 0;          /* top corner */
  right: 0;        /* right corner */
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: 16px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border-radius: 30%;
  cursor: pointer;
  z-index: 10;
}
.signature-overlay {
    border: 1px dotted rgba(0, 0, 0, 0.2); /* very light dotted border */
    box-sizing: border-box; /* ensures border doesn't affect width/height */
}

</style>
<div id="loaderOverlay" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    display: none;  /* Hidden by default */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-size: 1.2rem;
">
    <div class="spinner-border text-light mb-2" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    Sending...
</div>
         
    </div>

    <!-- PDF Preview Section (scrollable) -->
  <div id="pdf-container" class="flex-grow-1 overflow-auto border p-3 position-relative" style="min-height: 0;">
  <!-- Loader -->
  <div id="pdf-loader" class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75" style="z-index: 1000;">
    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>

  <!-- PDF pages will render here -->
</div>


    <!-- Apply Button -->
    <div class="p-3"><button id="apply-btn" class="btn btn-primary w-100 flex-shrink-0">Apply Signatures</button></div>
  </div>
</div>


  </div>
</div>
<!-- Terms & Conditions Modal -->
<!-- Terms & Conditions Modal -->
<!-- Terms & Conditions Modal -->

<style>
/* Blur effect for background */
.blur-backdrop {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s;
}
</style>
<!-- Optional Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">


<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-4 border-0">

      <div class="modal-body p-4" style="font-size: 15px; line-height: 1.5;">
        <img src="{% static 'assets/images/footer-logo.png' %}" alt="logo-large" class="logo-lg logo-light mb-4" style="height: 30px;">
                    
        <p class="fw-semibold mb-3">Please read the <a href="">Electronic Record and Signature Disclosure.</a></p>
         <label><input type="checkbox" id="confirm_user" required> I agree to use electronic records and signatures. <span style="color: red;">*</span></label>
        <!-- Decline Reason -->
        <div id="decline-reason-container" class="mt-3" style="display:none;">
          <label for="decline-reason" class="form-label">Optional Reason for Decline:</label>
          <textarea id="decline-reason" class="form-control" rows="3" placeholder="Enter reason (optional)"></textarea>
          <br>
           <div class="row">
            <div class="col-6">
              <button type="submit" id="submit-decline" class="btn btn-primary w-100">Submit Decline</button>
            </div>
            <div class="col-6">
              <button type="submit"  id="back-btn" class="btn btn-outline-secondary w-100">Back</button>
            </div>
          </div>

            
        </div>

        <!-- Assign Form -->
        <div id="assign-container" class="mt-3" style="display:none;">
          <label class="form-label fw-semibold">Assign to someone else:</label>
          <input type="text" id="assign_name" class="form-control mb-2" placeholder="Name" required>
          <input type="email" id="assign_email" class="form-control mb-2" placeholder="Email" required>
          <div class="row">
            <div class="col-6">
              <button type="submit" id="submit-assign" class="btn btn-primary w-100">Assign</button>
            </div>
            <div class="col-6">
              <button type="submit" id="back-button" class="btn btn-outline-secondary w-100">Back</button>
            </div>
          </div>
          
        </div>
      </div>

      <div class="modal-footer border-0 pt-0 p-4 justify-content-start">
        <button type="button" class="btn btn-primary px-4" id="accept-btn">I Agree</button>
        <button type="button" class="btn btn-danger px-4" id="decline-btn">Decline</button>
        <button type="button" class="btn btn-success px-4" id="assign-btn">Assign to someone else</button>
      </div>

    </div>
  </div>
</div>
<div id="loaderOverlay" style="
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 1055; /* above modal */
    justify-content: center;
    align-items: center;
">
    <div class="spinner-border text-primary" role="status" style="width: 4rem; height: 4rem;">
      <span class="visually-hidden">Loading...</span>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
  const loaderOverlay = document.getElementById("loaderOverlay");

function showLoader() {
    loaderOverlay.style.display = "flex";
}

function hideLoader() {
    loaderOverlay.style.display = "none";
}

document.addEventListener("DOMContentLoaded", function(){

    const pdfContainer = document.getElementById("pdf-container");
    const pdfLoader = document.getElementById("pdf-loader");
    const applyBtn = document.getElementById("apply-btn");
    // applyBtn.disabled = true;

    // Initialize modal (static backdrop = can't close by clicking outside)
    const termsModalEl = document.getElementById('termsModal');
    const termsModal = new bootstrap.Modal(termsModalEl, {backdrop:'static', keyboard:false});

    // Blur background while waiting
    pdfContainer.classList.add("blur-backdrop");

    // 🔹 Check if user already accepted terms
    
    fetch("/check-terms/")
        .then(response => response.json())
        .then(data => {
            if (!data.accepted) {
                // Show terms modal if not accepted yet
                termsModal.show();
            } else {
                // If already accepted, load PDF directly
                pdfContainer.classList.remove("blur-backdrop");
                applyBtn.disabled = false;
                loadPDF();
            }
        });


                // termsModal.show();

    // Accept
    function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== "") {
                const cookies = document.cookie.split(";");
                for (let cookie of cookies) {
                    cookie = cookie.trim();
                    if (cookie.startsWith(name + "=")) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

     document.getElementById("accept-btn").addEventListener("click", function() {
        // Store in session via backend
        if (!$("#confirm_user").is(":checked")) {
    alert("Please check the box before proceeding.");
    return; // stop further execution
    }
        fetch("/accept-terms/", {
            method: "POST",
            headers: {
                "X-CSRFToken": getCookie("csrftoken"),
            },
        }).then(() => {
            termsModal.hide();
            pdfContainer.classList.remove("blur-backdrop");
            pdfLoader.style.display = "flex";
            applyBtn.disabled = false;
            loadPDF();
        });
    });
    


    // Decline
    document.getElementById("decline-btn").addEventListener("click", function(){
        this.style.display = "none";
        document.getElementById("accept-btn").style.display = "none";
        document.getElementById("assign-btn").style.display = "none";
        document.getElementById("decline-reason-container").style.display = "block";
    });
    document.getElementById("back-btn").addEventListener("click", function(){
    document.getElementById("decline-reason-container").style.display = "none";
    document.getElementById("assign-btn").style.display = "inline-block";   // or "block" depending on layout
    document.getElementById("accept-btn").style.display = "inline-block";
    document.getElementById("decline-btn").style.display = "inline-block";
    });

    

    // Assign
    document.getElementById("assign-btn").addEventListener("click", function(){
        this.style.display = "none";
        document.getElementById("accept-btn").style.display = "none";
        document.getElementById("decline-btn").style.display = "none";
        document.getElementById("assign-container").style.display = "block";
    });
    document.getElementById("back-button").addEventListener("click", function(){
        document.getElementById("assign-container").style.display = "none";
        document.getElementById("assign-btn").style.display = "inline-block";   // or "block" depending on layout
        document.getElementById("accept-btn").style.display = "inline-block";
        document.getElementById("decline-btn").style.display = "inline-block";
    });

    // Decline submit
    // 
    document.getElementById("submit-decline").addEventListener("click", function(){
    if (!$("#confirm_user").is(":checked")) {
        alert("Please check the box before proceeding.");
        return; // stop further execution
    }
    const reason = document.getElementById("decline-reason").value;
    const pathParts = window.location.pathname.split('/').filter(p => p);
    const token = pathParts[1];

    if(!confirm("Are you sure you want to decline?")) return;

    // document.getElementById('loaderOverlay').style.display = 'flex';
      showLoader();

    fetch(`/cancel-signing/${token}/`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": "{{ csrf_token }}"
        },
        body: JSON.stringify({ reason: reason })
    }).then(res => res.json())
      .then(data => {
        
          if(data.success){
                termsModal.hide();

              // Redirect to thank you page
              window.location.href = "/thank_you/";
          } else {
              alert(data.message || "Something went wrong.");
              document.getElementById('loaderOverlay').style.display = 'none';
          }
      });
});

    // Assign submit
    document.getElementById("submit-assign").addEventListener("click", function(){
        const name = document.getElementById("assign_name").value;
        const email = document.getElementById("assign_email").value;
        const pathParts = window.location.pathname.split('/').filter(p => p);
        const token = pathParts[1];
      if (!$("#confirm_user").is(":checked")) {
        alert("Please check the box before proceeding.");
        return; // stop further execution
    }
        if(!name || !email){
            alert("Please enter both name and email");
            return;
        }

        // document.getElementById('loaderOverlay').style.display = 'flex';
        const baseUrl = window.location.origin;  // e.g. http://127.0.0.1:8001
        const assignUrl = `${baseUrl}/document/assign/${token}/`;
    showLoader();

        fetch(assignUrl, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}"
            },
            body: JSON.stringify({ assign_name: name, assign_email: email })
        }).then(res => res.json())
          .then(data => {
                termsModal.hide();

              if(data.status == "success"){
                  // Redirect to thank you page
                  window.location.href = "/thank_you/";
              } else {

                  alert(data.message || "Something went wrong.");
                  termsModal.show();
                  // document.getElementById('loaderOverlay').style.display = 'none';
                  
              }
          });
    });



        function loadPDF(){
            pdfLoader.style.display = "none";
        }

    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js"></script>
<style>
  .pdf-page-wrapper {
  position: relative;
  
}
.sig-box-db {
  position: absolute;
  z-index: 10;
  pointer-events: none; /* optional, taaki drag/drop me interfere na kare */
    text-align: center; /* text box ke liye optional */
      padding: 15px 0;         /* upar-niche space */


}

</style>
<script>
const signatureBoxes = {{ signature_boxes|safe }};
let selectedSignature = null;

</script>

<!-- Signature Modal -->

<!-- <div class="modal" id="sigModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered" > 
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Sign Here</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div>
      <button id="typeNameBtn" type="button" class="btn btn-primary">Type Name</button>
      <button id="uploadImageBtn" type="button" class="btn btn-primary">Upload Image</button>
      <button id="drawBtn" type="button" class="btn btn-primary">Draw</button>
    </div>
    <div id="sigContent" style="margin-top:10px;"></div>
      </div>
      <div class="modal-footer justify-content-start">
        <button type="button" class="btn btn-success" id="saveSigBtn">Save changes</button>
      <button type="button" class="btn btn-danger" id="closeSigBtn">Close</button>
      </div>
    </div>
  </div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Pacifico&family=Dancing+Script&family=Satisfy&family=Sacramento&family=Cookie&family=Allura&family=Parisienne&family=Alex+Brush&family=Marck+Script&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Pacifico&family=Dancing+Script&family=Satisfy&family=Sacramento&family=Cookie&family=Allura&family=Parisienne&family=Alex+Brush&family=Marck+Script&display=swap" rel="stylesheet">


<style>
.signature-box {
    border: 1px solid #dcdcdc;
    padding: 20px;
    border-radius: 8px;
    background: #fff;
}

.sig-generated {
    font-size: 38px;
    padding: 10px 0;
    color: #111;
}

.tab-btn {
    font-weight: 600;
    cursor: pointer;
}

.tab-btn.active {
    color: #1a73e8;
    border-bottom: 2px solid #1a73e8;
}

#drawCanvas {
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: crosshair;
}
</style>

<div class="modal" id="sigModal" tabindex="-1">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Adopt Your Signature</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <!-- NAME & INITIALS -->
        <div class="row mb-4">
          <div class="col-md-8">
            <label class="form-label fw-bold">Full Name *</label>
            <input type="text" id="fullName" class="form-control" placeholder="Your Full Name">
          </div>
          <div class="col-md-4">
            <label class="form-label fw-bold">Initials *</label>
            <input type="text" id="initials" class="form-control" placeholder="SD">
          </div>
        </div>


        

        <!-- TABS -->
        <div class="d-flex gap-4 mb-3 border-bottom pb-2">
          <div class="tab-btn active" data-tab="styleTab">SELECT STYLE</div>
          <div class="tab-btn" data-tab="drawTab">DRAW</div>
          <div class="tab-btn" data-tab="uploadTab">UPLOAD</div>
        </div>
                  <div id="drawTab" class="tab-content d-none">
                    <h6 class="fw-bold mb-2">Draw Your Signature</h6>
                    <canvas id="drawCanvas" width="600" height="200" style="border:1px solid #ccc;"></canvas>
                    <button type="button" id="clearCanvas" class="btn btn-secondary mt-2">Clear</button>
                  </div>

                  <!-- UPLOAD TAB -->
                  <div id="uploadTab" class="tab-content d-none">
                    <h6 class="fw-bold mb-2">Upload Signature Image</h6>
                    <input type="file" id="uploadInput" class="form-control mb-2" accept="image/*">
                    <img id="uploadPreview" style="max-width:100%; border:1px solid #ccc;" />
                  </div>
        <!-- TAB CONTENT -->
        <div id="styleTab" class="tab-content">

          <a href="#" id="changeStyle" class="float-end mb-2">Change Style</a>
          <h6 class="fw-bold">PREVIEW</h6>

          <div class="signature-box mt-2">

            <div class="row">
              <!-- LEFT: SIGNATURE -->
              <div class="col-md-8">
                <small>Signed by:</small>
                <div id="signaturePreview" class="sig-generated"></div>
                <small id="sigCode"></small>
              </div>

              <!-- RIGHT: INITIALS -->
              <div class="col-md-4">
                <small>DS</small>
                <div id="initialsPreview" class="sig-generated"></div>
              </div>
            </div>

          </div>
<div id="savedSigTab" class="tab-content d-none">
  <h6>Select a Saved Signature</h6>
  <div id="savedSignatures"></div>
</div>
        </div><div class="modal-footer">
    <button type="button" id="adoptSignBtn" class="btn btn-primary">Adopt & Save</button>
</div>


        </div>
        </div>
        </div>
<!-- DRAW TAB -->



        <script>
          const fonts = [
  "Great Vibes","Pacifico","Dancing Script","Satisfy","Sacramento",
  "Cookie","Allura","Parisienne","Alex Brush","Marck Script"
];

let fontIndex = 0;

function updateSignature() {
    const name = document.getElementById("fullName").value || "Your Name";
    const init = document.getElementById("initials").value || "AA";

    document.getElementById("signaturePreview").style.fontFamily = fonts[fontIndex];
    document.getElementById("initialsPreview").style.fontFamily = fonts[fontIndex];

    document.getElementById("signaturePreview").innerHTML = name;
    document.getElementById("initialsPreview").innerHTML = init;

    document.getElementById("sigCode").innerHTML = "FD6926A7188A444…"; // Fake code example
}

document.getElementById("fullName").addEventListener("input", updateSignature);
document.getElementById("initials").addEventListener("input", updateSignature);

// Change Style (Next Font)
document.getElementById("changeStyle").addEventListener("click", function () {
  console.log("okk");
    fontIndex = (fontIndex + 1) % fonts.length;
    updateSignature();
});

// TAB SWITCHING
document.querySelectorAll(".tab-btn").forEach(btn => {
    btn.addEventListener("click", function () {
        document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
        this.classList.add("active");

        document.querySelectorAll(".tab-content").forEach(tab => tab.classList.add("d-none"));
        document.getElementById(this.dataset.tab).classList.remove("d-none");
    });
});

/* ---------------- DRAW SIGNATURE ---------------- */
let canvas = document.getElementById("drawCanvas");
let ctx = canvas.getContext("2d");
let drawing = false;

canvas.addEventListener("mousedown", () => drawing = true);
canvas.addEventListener("mouseup", () => drawing = false);
canvas.addEventListener("mousemove", draw);

function draw(e) {
    if (!drawing) return;

    ctx.lineWidth = 3;
    ctx.lineCap = "round";
    ctx.strokeStyle = "#000";

    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}

document.getElementById("clearCanvas").addEventListener("click", () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

/* ---------------- UPLOAD SIGNATURE ---------------- */
document.getElementById("uploadInput").addEventListener("change", function(){
    const file = this.files[0];
    document.getElementById("uploadPreview").src = URL.createObjectURL(file);
});

/* ---------------- Adopt and Sign ---------------- */
// document.getElementById("adoptSignBtn").addEventListener("click", function(){
//     alert("Signature successfully adopted!");
// });


let currentBoxDiv = null;
let currentBox = null;

function openSignatureModal(div, box) {
    currentBoxDiv = div;  // store for saving
    currentBox = box;

    const fullNameInput = document.getElementById("fullName");
    const initialsInput = document.getElementById("initials");
    const uploadPreview = document.getElementById("uploadPreview");

    fullNameInput.value = box.name || "";
    initialsInput.value = getInitials(box.name || "");
    updateSignature();

    if (box.savedImageUrl) {
        document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
        document.querySelectorAll(".tab-content").forEach(t => t.classList.add("d-none"));

        document.querySelector('.tab-btn[data-tab="uploadTab"]').classList.add("active");
        document.getElementById("uploadTab").classList.remove("d-none");

        uploadPreview.src = box.savedImageUrl;
    }

    const sigModal = new bootstrap.Modal(document.getElementById('sigModal'));
    sigModal.show();
}

// Helper to generate initials
function getInitials(name){
    const parts = name.trim().split(" ");
    let initials = "";
    for(let i=0;i<parts.length;i++){
        if(parts[i].length>0) initials += parts[i][0].toUpperCase();
    }
    return initials;
}


document.getElementById("adoptSignBtn").addEventListener("click", function(){

    let finalDataUrl = null;
    let initialsDataUrl = null;

    const drawTab = document.getElementById("drawTab");
    const uploadTab = document.getElementById("uploadTab");
    const styleTab = document.getElementById("styleTab");

    // 1️⃣ Full signature
    if (!drawTab.classList.contains("d-none")) {
        finalDataUrl = canvas.toDataURL("image/png");
    }
    if (!uploadTab.classList.contains("d-none")) {
        const fileInput = document.getElementById("uploadInput");
        if (fileInput.files.length) {
            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                sendSignatureToServer(e.target.result, null);
            };
            reader.readAsDataURL(file);
            return;
        } else if(finalDataUrl === null){
            alert("Please upload an image or draw your signature.");
            return;
        }
    }
    if (!styleTab.classList.contains("d-none")) {
        const name = document.getElementById("fullName").value || "Your Name";
        const initials = document.getElementById("initials").value || "AA";

        // Full signature
        const tempCanvas = document.createElement("canvas");
        tempCanvas.width = 160;
        tempCanvas.height = 60;
        const ctx = tempCanvas.getContext("2d");
        ctx.font = "24px " + fonts[fontIndex];
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.fillStyle = "#00000";        // ✅ sets fill color
        ctx.fillText(name, tempCanvas.width/2, tempCanvas.height/2);
        finalDataUrl = tempCanvas.toDataURL("image/png");

        // Initials
        const initialsCanvas = document.createElement("canvas");
        initialsCanvas.width = 80;
        initialsCanvas.height = 60;
        const ctx2 = initialsCanvas.getContext("2d");
        ctx2.fillStyle = "#000";
        ctx2.font = "24px " + fonts[fontIndex];
        ctx2.textBaseline = "middle";
        ctx2.textAlign = "center";
        ctx2.fillText(initials, initialsCanvas.width/2, initialsCanvas.height/2);
        initialsDataUrl = initialsCanvas.toDataURL("image/png");
    }

    // Send both images
    if(finalDataUrl) sendSignatureToServer(finalDataUrl, initialsDataUrl);

    function sendSignatureToServer(dataUrl, initialsUrl){
        const name = document.getElementById("fullName").value || "Your Name";
        const email = "{{ request.user.email }}"; // or decode from URL if needed

        fetch("/upload_signature/", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}"
            },
            body: JSON.stringify({
                image: dataUrl,
                initials_image: initialsUrl, // send initials too
                name: name,
                email: email
            })
        })
        .then(r => r.json())
        .then(j => {
            if(j.ok){
                alert("Signature successfully saved!");

                // Update box
                if(currentBoxDiv){
                    currentBoxDiv.style.backgroundImage = `url(${j.url})`;
                    currentBoxDiv.style.backgroundSize = "contain";
                    currentBoxDiv.style.backgroundRepeat = "no-repeat";
                    currentBoxDiv.style.backgroundPosition = "center";
                    currentBoxDiv.innerText = "";
                    currentBoxDiv.dataset.sigId = j.id; // also store in DOM
                        currentBoxDiv.style.opacity = "1";

                }
    selectedSignature = { id: j.id, src: j.url };

                // Close modal
                const sigModal = bootstrap.Modal.getInstance(document.getElementById('sigModal'));
                if(sigModal) sigModal.hide();

            } else {
                alert("Error saving signature: " + (j.error || ""));
            }
        });
    }
});




        </script>
















<script>

// Render PDF
// const pdfUrl = "{{ document.file.url }}";
const pdfUrl = "{{ file_to_sign|escapejs  }}";
console.log(pdfUrl);
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
let scale = 1.4;

let activeBox = null;
let signatureData = null; // stores final data (image/text) to render in PDF box

pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  const container = document.getElementById("pdf-container");
  container.innerHTML = "";

  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    pdf.getPage(pageNum).then(page => {
      const viewport = page.getViewport({ scale: scale });

      const pageWrapper = document.createElement("div");
      pageWrapper.className = "pdf-page-wrapper";
      pageWrapper.dataset.page = pageNum;
      pageWrapper.style.position = "relative";

      const canvas = document.createElement("canvas");
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      pageWrapper.appendChild(canvas);
      container.appendChild(pageWrapper);

      page.render({ canvasContext: canvas.getContext("2d"), viewport: viewport });

      signatureBoxes.forEach(box => {
        if (box.page === pageNum) {
          const div = document.createElement("div");
          div.className = "sig-box-db";
           if (["signature", "stamp", "drawn"].includes(box.type)) {
            div.classList.add("drag-sig");
            div.dataset.page = pageNum; // store page for later
        }

          const pageWidth = pageWrapper.clientWidth;
          const pageHeight = pageWrapper.clientHeight;
          div.style.left = (box.x / 100 * pageWidth) + "px";
          div.style.top = (box.y / 100 * pageHeight) + "px";
          div.style.width = (box.width / 100 * pageWidth) + "px";
          div.style.height = (box.height / 100 * pageHeight) + "px";
          div.style.fontFamily = box.font_family || "Arial";
          div.style.color = box.color || "#000";
          div.style.fontWeight = box.font_weight || "normal";
          div.style.fontStyle = box.font_style || "normal";
          div.style.textDecoration = box.text_decoration || "none";
          div.style.opacity = "0.2";
          div.style.position = "absolute";
          div.style.zIndex = "1000";
          div.style.border = `2px dashed ${box.color || "#FF0000"}`;
          div.style.display = "flex";
          div.style.alignItems = "center";
          div.style.justifyContent = "center";
          div.setAttribute("data-box-id", box.id);
          div.setAttribute("data-required", "true");

      if (box.type === "signature") {
          div.innerText = "Signature";
    div.style.pointerEvents = "auto";
    div.style.cursor = "pointer";

    div.addEventListener("click", () => {
        // Find any signature box that already has an image
        const prevSigBox = document.querySelector(".sig-box-db[data-sig-id][style*='background-image']");

        if (prevSigBox) {
            const existingImage = prevSigBox.style.backgroundImage;
            if (existingImage && existingImage !== "none") {
                // Apply the previous image to this box
                div.style.backgroundImage = existingImage;
                div.style.backgroundSize = "contain";
                div.style.backgroundRepeat = "no-repeat";
                div.style.backgroundPosition = "center";
                div.innerText = "";
                 div.style.opacity = "1";
                // div.setAttribute("data-signed", "true");

                // Also show in modal preview
                const uploadPreview = document.getElementById("uploadPreview");

                document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
                document.querySelectorAll(".tab-content").forEach(t => t.classList.add("d-none"));

                document.querySelector('.tab-btn[data-tab="uploadTab"]').classList.add("active");
                document.getElementById("uploadTab").classList.remove("d-none");

                uploadPreview.src = existingImage.slice(5, -2); // remove url("...") wrapper
                return; // Done, no need to open modal for creating
            }
        }

        // If no previous filled signature, open modal for new signature
        openSignatureModal(div, box);
    });
}




    else if(box.type === "initial"){
    div.style.pointerEvents = "auto";
    div.style.cursor = "pointer";
          div.innerText = "Initial";

    div.addEventListener("click", () => {
        // Find the linked signature box (replace with your actual selector if needed)
        const sigBoxDiv = document.querySelector(".sig-box-db");

        const linkedSigId = sigBoxDiv.getAttribute("data-sig-id");
        if(!linkedSigId){
            alert("No linked signature found.");
            return;
        }

        // Fetch the initials image from the server
        fetch(`/get_initial_image/${linkedSigId}/`)
            .then(res => res.json())
            .then(data => {
                if (data.ok && data.initialImageUrl) {
                    // Apply image as background
                    div.style.backgroundImage = `url(${data.initialImageUrl})`;
                    div.style.backgroundSize = "contain";
                    div.style.backgroundRepeat = "no-repeat";
                    div.style.backgroundPosition = "center";
                    div.innerText = ""; // remove text if any
                    div.style.opacity = "1";
                    // div.setAttribute("data-signed", "true");
                } else {
                    alert("Initial image not found for this signature.");
                    div.innerText = getInitials(box.name || "");
                }
            })
            .catch(err => console.error(err));
    });
}



   else if (box.type === "stamp") {
    div.style.pointerEvents = "auto";
    div.style.cursor = "pointer";
    div.innerText = "Stamp";

    div.addEventListener("click", () => {
        // Create a hidden file input dynamically
        const fileInput = document.createElement("input");
        fileInput.type = "file";
        fileInput.accept = "image/*";
        fileInput.click();

        fileInput.addEventListener("change", () => {
            if (fileInput.files.length === 0) return;
            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                const dataUrl = e.target.result;

                // Immediately show image in the box
                div.style.backgroundImage = `url(${dataUrl})`;
                div.style.backgroundSize = "contain";
                div.style.backgroundRepeat = "no-repeat";
                div.style.backgroundPosition = "center";
                div.innerText = "";
                // div.setAttribute("data-signed", "true");

                // Send to server to save
                fetch("/upload_signature/", {  // Django URL for stamp upload
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRFToken": "{{ csrf_token }}"
                    },
                    body: JSON.stringify({
                        image: dataUrl,
                        box_id: box.id , // link stamp to this box
                                email: "{{ request.user.email }}"   // <-- send the user's email here

                    })
                })
                .then(res => res.json())
                .then(resp => {
                    if(resp.ok){
                        console.log("Stamp saved with ID:", resp.id);
                        div.dataset.stampId = resp.id; // store DB ID
                    } else {
                        alert("Error saving stamp: " + (resp.error || ""));
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert("Error uploading stamp.");
                });
            };

            reader.readAsDataURL(file);
        });
    });
}

        else if (box.type === "date") {
            const today = new Date();
            div.innerText = today.toLocaleDateString();
            div.style.opacity = "1";

            // div.setAttribute("data-signed", "true");
        }

                    pageWrapper.appendChild(div);
                    
                  }
                });
              });
            }
          });
const sigModal = document.getElementById("sigModal");
const sigContent = document.getElementById("sigContent");
const saveSigBtn = document.getElementById("saveSigBtn");
const closeSigBtn = document.getElementById("closeSigBtn");

// document.getElementById("typeNameBtn").addEventListener("click", () => {
//   sigContent.innerHTML = '<input id="nameInput" type="text" placeholder="Type your name" class="form-control mt-3"><div id="previewText" style="margin-top:5px; font-size:20px; font-weight:bold;"></div>';
//   const input = document.getElementById("nameInput");
//   const preview = document.getElementById("previewText");
//   input.addEventListener("input", () => { preview.innerText = input.value; });
// });






// Flicker-free signature placement
let activeSignatureId = null; // track which signature is active

// Drag from signature list
document.querySelectorAll('.sig-select').forEach(img=>{
  img.addEventListener('dragstart', e=>{
    // अगर कोई signature पहले से active है और वो current नहीं है, block drag
    if(activeSignatureId && activeSignatureId !== img.dataset.id){
        e.preventDefault();
        return;
    }
    selectedSignature={id:img.dataset.id, src:img.src};
  });

  // Click / drag sets this signature as active
  img.addEventListener('pointerdown', e=>{
    if(!activeSignatureId) activeSignatureId = img.dataset.id;
  });
});

// Updated placeSignature function
function placeSignature(pageWrapper, clientX, clientY, pageNum, src=null){
    if(!selectedSignature) return;
    // only allow placing if this signature is active
    if(activeSignatureId && activeSignatureId !== selectedSignature.id) return;
    
     const allowedPages = {{ allowed_pages_list|safe }} || []; // from Django template
    if (allowedPages.length > 0 && !allowedPages.includes(pageNum)) {
        alert("You cannot sign this page.");
        return; // stop further execution
    }
    const boxes = signatureBoxes.filter(b => b.page === pageNum);
    const rect = pageWrapper.getBoundingClientRect();
    const x = clientX - rect.left;
    const y = clientY - rect.top;
    

    let insideBox = null;
    if(boxes.length>0){
      // mark box as signed when signature added inside that box
   
          


        boxes.forEach(box=>{
            const bx = box.x/100*pageWrapper.clientWidth;
            const by = box.y/100*pageWrapper.clientHeight;
            const bw = box.width/100*pageWrapper.clientWidth;
            const bh = box.height/100*pageWrapper.clientHeight;
            if(x>=bx && x<=bx+bw && y>=by && y<=by+bh){ insideBox={left:bx, top:by, width:bw, height:bh,id: box.id}; }
        });
          const requiredBox = document.querySelector(
                `.sig-box-db[data-box-id='${insideBox.id}']`
            );
            if (requiredBox) {
                // requiredBox.setAttribute("data-signed", "true");
                requiredBox.style.opacity = "0.1"; // hide dashed box after signing
            }
        
        if(!insideBox){
           alert("You can only place signature inside the predefined box!");
            return; 
          }
    } else { 
      insideBox={
        left:x-75, top:y-20, width:150, height:40
      };
     }

    const overlay=document.createElement("img");
    overlay.src=src||selectedSignature.src;
    overlay.style.position="absolute";
    overlay.style.left=insideBox.left+"px";
    overlay.style.top=insideBox.top+"px";
    overlay.style.width=insideBox.width+"px";
    overlay.style.height=insideBox.height+"px";
    overlay.style.cursor="move";
    overlay.className="drag-sig";
    overlay.dataset.page=pageNum;
    overlay.style.transform="translate(0,0)";
    overlay.style.willChange="transform";
    overlay.style.userSelect="none";

    let startX=0, startY=0, dragTarget=null;

    overlay.addEventListener("pointerdown", e=>{
        e.preventDefault();
        dragTarget=overlay;
        startX=e.clientX; startY=e.clientY;
        overlay.setPointerCapture(e.pointerId);
    });

    overlay.addEventListener("pointermove", e=>{
        if(dragTarget===overlay && e.buttons===1){
            let dx=e.clientX-startX, dy=e.clientY-startY;
            if(boxes.length>0 && insideBox){
                dx=Math.min(Math.max(0, dx), insideBox.width-overlay.offsetWidth);
                dy=Math.min(Math.max(0, dy), insideBox.height-overlay.offsetHeight);
            }
            overlay.style.transform=`translate(${dx}px, ${dy}px)`;
        }
    });

    overlay.addEventListener("pointerup", e=>{
        if(dragTarget===overlay){
            const matrix=new DOMMatrix(getComputedStyle(overlay).transform);
            overlay.style.left=(parseFloat(overlay.style.left)+matrix.m41)+"px";
            overlay.style.top=(parseFloat(overlay.style.top)+matrix.m42)+"px";
            overlay.style.transform="translate(0,0)";
            overlay.releasePointerCapture(e.pointerId);
            dragTarget=null;
        }
    });

    overlay.addEventListener("dblclick", ()=>{ if(confirm("Delete signature?")) overlay.remove(); });
    pageWrapper.appendChild(overlay);
}
function placeSignaturenew(pageWrapper, clientX, clientY, pageNum, src = null) {
    if (!selectedSignature) return;
    if (!pageWrapper) return;

    if (activeSignatureId && activeSignatureId !== selectedSignature.id) return;

    const boxes = signatureBoxes.filter(b => b.page === pageNum);
    const rect = pageWrapper.getBoundingClientRect();
    const x = clientX - rect.left;
    const y = clientY - rect.top;

    let insideBox = null;
    if (boxes.length > 0) {
        boxes.forEach(box => {
            const bx = (box.x / 100) * pageWrapper.clientWidth;
            const by = (box.y / 100) * pageWrapper.clientHeight;
            const bw = (box.width / 100) * pageWrapper.clientWidth;
            const bh = (box.height / 100) * pageWrapper.clientHeight;
            if (x >= bx && x <= bx + bw && y >= by && y <= by + bh) {
                insideBox = { left: bx, top: by, width: bw, height: bh };
            }
        });
        if (!insideBox) {
            alert("You can only place signature inside the predefined box!");
            return;
        }
    } else {
        insideBox = { left: x - 75, top: y - 20, width: 150, height: 40 };
    }

    // Signature image
    const overlay = document.createElement("img");
    overlay.src = src || selectedSignature.src;
    overlay.style.position = "absolute";
    overlay.style.left = insideBox.left + "px";
    overlay.style.top = insideBox.top + "px";
    overlay.style.width = insideBox.width + "px";
    overlay.style.height = insideBox.height + "px";
    overlay.style.cursor = "move";
    overlay.className = "drag-sig signature-overlay";
    overlay.dataset.page = pageNum;
    overlay.style.userSelect = "none";
    overlay.style.willChange = "transform";

    // Close button
    const closeBtn = document.createElement("span");
    closeBtn.innerHTML = "&times;";
    closeBtn.style.position = "absolute";
    closeBtn.style.top = (insideBox.top + 2) + "px";
    closeBtn.style.right = (insideBox.left + 2) + "px";
    closeBtn.style.backgroundColor = "red";
    closeBtn.style.color = "white";
    closeBtn.style.borderRadius = "50%";
    closeBtn.style.width = "20px";
    closeBtn.style.height = "20px";
    closeBtn.style.display = "flex";
    closeBtn.style.justifyContent = "center";
    closeBtn.style.alignItems = "center";
    closeBtn.style.fontSize = "14px";
    closeBtn.style.fontWeight = "bold";
    closeBtn.style.cursor = "pointer";

    closeBtn.addEventListener("click", (e) => {
        e.stopPropagation();
        if (confirm("Delete signature?")) {
            overlay.remove();
            closeBtn.remove();
        }
    });

    // Drag functionality
    let startX = 0, startY = 0, dragging = false;

    overlay.addEventListener("pointerdown", e => {
        if (e.target === closeBtn) return;
        e.preventDefault();
        startX = e.clientX - overlay.offsetLeft;
        startY = e.clientY - overlay.offsetTop;
        dragging = true;
        overlay.setPointerCapture(e.pointerId);
    });

    overlay.addEventListener("pointermove", e => {
        if (dragging) {
            let newX = e.clientX - startX;
            let newY = e.clientY - startY;

            if (boxes.length > 0 && insideBox) {
                newX = Math.min(Math.max(insideBox.left, newX), insideBox.left + insideBox.width - overlay.offsetWidth);
                newY = Math.min(Math.max(insideBox.top, newY), insideBox.top + insideBox.height - overlay.offsetHeight);
            }

            overlay.style.left = newX + "px";
            overlay.style.top = newY + "px";

            // Move closeBtn along with image
            closeBtn.style.left = (newX + 2) + "px";
            closeBtn.style.top = (newY + 2) + "px";
        }
    });

    overlay.addEventListener("pointerup", e => {
        dragging = false;
        overlay.releasePointerCapture(e.pointerId);
    });

    pageWrapper.appendChild(overlay);
    pageWrapper.appendChild(closeBtn);
}





// Apply signatures
document.getElementById("apply-btn").addEventListener("click", ()=>{
console.log("gfds");

// const requiredBoxes = document.querySelectorAll(".sig-box-db[data-required='true']");
// let pendingCount = 0;
// let firstPendingBox = null;

// // Count pending boxes
// requiredBoxes.forEach(box => {
//     if (box.getAttribute("data-signed") !== "true") {
//         pendingCount++;
//         if (!firstPendingBox) firstPendingBox = box;
//     }
// });

// if (pendingCount > 0) {

//     // Scroll to the first pending box
//     firstPendingBox.scrollIntoView({ behavior: "smooth", block: "center" });

//     // Highlight that box
//     firstPendingBox.style.border = "3px solid red";
//     firstPendingBox.style.opacity = "1";

//     // Show message inside the box
//     firstPendingBox.innerText = "SIGN REQUIRED";
//     firstPendingBox.style.color = "red";
//     firstPendingBox.style.fontWeight = "bold";
//     firstPendingBox.style.fontSize = "16px";
//     firstPendingBox.style.display = "flex";
//     firstPendingBox.style.alignItems = "center";
//     firstPendingBox.style.justifyContent = "center";

//     // Alert with remaining count
//     alert(`You have ${pendingCount} signature(s) remaining.`);

//     return; // Stop submit
// }


console.log("gfds");
  const placements=[];
  document.querySelectorAll(".drag-sig").forEach(sig=>{
    const pageWrapper=sig.parentElement;
    const canvas=pageWrapper.querySelector("canvas");
    const pdfRect=canvas.getBoundingClientRect();
    const sigRect=sig.getBoundingClientRect();
    placements.push({ page:parseInt(sig.dataset.page), x_pct:(sigRect.left-pdfRect.left+sigRect.width/2)/pdfRect.width, y_pct:(sigRect.top-pdfRect.top+sigRect.height/2)/pdfRect.height, width_pct:sigRect.width/pdfRect.width, height_pct:sigRect.height/pdfRect.height, signature_id:selectedSignature.id });
  });
        document.getElementById('loaderOverlay').style.display = 'flex';

  fetch("{% url 'apply_signatures' %}",{ method:'POST', headers:{'Content-Type':'application/json','X-CSRFToken':'{{ csrf_token }}'}, 
  body:JSON.stringify({token:'{{ token }}',placements:placements}) }).then(r=>r.json()).then(data=>{ if(data.ok){ alert("Signed Document!"); 
      window.location.href = window.location.origin + '/thank_you/';
     } else alert("Error: "+(data.error||'Unknown error')); }).catch(err=>{ console.error(err); alert("Network/server error"); });
});

// Delete saved signature
document.querySelectorAll('.delete-sig').forEach(btn=>{
  btn.addEventListener('click', e=>{
    const wrapper=e.target.closest('.sig-wrapper');
    const sigId=wrapper.querySelector('img').dataset.id;
    if(confirm('Delete this signature?')){
      fetch("{% url 'delete_signature' %}",{ method:'POST', headers:{ 'Content-Type':'application/json','X-CSRFToken':'{{ csrf_token }}' }, body:JSON.stringify({id:sigId}) }).then(r=>r.json()).then(data=>{ if(data.ok) wrapper.remove(); else alert('Error deleting signature'); });
    }
  });
});

// Drag from signature list
document.querySelectorAll('.sig-select').forEach(img=>{ img.addEventListener('dragstart', e=>{ selectedSignature={id:img.dataset.id,src:img.src}; }); });

</script>
{% endif %}

{% endblock %}